<template>
<a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                    <a-form-item label="生产号">
                        <a-input placeholder="请输入生产号" v-model="queryParam.odd"></a-input>
                    </a-form-item>
                </a-col>
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                    <a-form-item label="订单号">
                        <a-input placeholder="请输入订单号" v-model="queryParam.orderOdd"></a-input>
                    </a-form-item>
                </a-col>
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                    <a-form-item label="下单日期">
                        <j-date placeholder="请输入下单日期" v-model="queryParam.date"></j-date>
                    </a-form-item>
                </a-col>
                <template v-if="toggleSearchStatus">
                    <a-col :xl="6" :lg="7" :md="8" :sm="24">
                        <a-form-item label="客户">
                            <j-dict-select-search type="list" v-model="queryParam.customerNumber" :trigger-change="true" dictCode="bas_customer,name,id" @change="getName" />
                        </a-form-item>
                    </a-col>
                    <a-col :xl="6" :lg="7" :md="8" :sm="24">
                        <a-form-item label="交货日期">
                            <j-date placeholder="请输入交货日期" v-model="queryParam.deliveryDate"></j-date>
                        </a-form-item>
                    </a-col>
                    <a-col :xl="6" :lg="7" :md="8" :sm="24">
                        <a-form-item label="颜色">
                            <a-input placeholder="请输入颜色" v-model="queryParam.color"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :xl="6" :lg="7" :md="8" :sm="24">
                        <a-form-item label="规格">
                            <a-input placeholder="请输入规格" v-model="queryParam.specifications"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :xl="6" :lg="7" :md="8" :sm="24">
                        <a-form-item label="实际生成数量">
                            <a-input placeholder="请输入实际生成数量" v-model="queryParam.numberGenerated"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :xl="6" :lg="7" :md="8" :sm="24">
                        <a-form-item label="是否中止执行">
                            <a-input placeholder="请输入是否中止执行" v-model="queryParam.isExecution"></a-input>
                        </a-form-item>
                    </a-col>
                </template>
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                    <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                        <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                        <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                        <a @click="handleToggleSearch" style="margin-left: 8px">
                            {{ toggleSearchStatus ? '收起' : '展开' }}
                            <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
                        </a>
                    </span>
                </a-col>
            </a-row>
        </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
        <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
        <a-button type="primary" icon="download" @click="handleExportXls('生产任务单')">导出</a-button>
        <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
            <a-button type="primary" icon="import">导入</a-button>
        </a-upload>
        <a-select ref="select" v-model="condition" style="width: 90px" @change="sift">
            <a-select-option v-for="(elem,index) in options" :key="index" :value="elem.label">{{elem.label}}</a-select-option>
        </a-select>

        <a-dropdown v-if="selectedRowKeys.length > 0">
            <a-menu slot="overlay">
                <a-menu-item key="1" @click="batchDel">
                    <a-icon type="delete" />删除
                </a-menu-item>
                <a-menu-item key="2" @click="production">
                    <a-icon type="edit" />批量生产
                </a-menu-item>
            </a-menu>
            <a-button style="margin-left: 8px">
                批量操作
                <a-icon type="down" />
            </a-button>
        </a-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
        <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
            <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
            <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
            <a style="margin-left: 24px" @click="onClearSelected">清空</a>
        </div>

        <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource" :pagination="ipagination" :loading="loading" :scroll="{ x: 2600 }" :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" class="j-table-force-nowrap" :customRow="clickThenSelect" @change="handleTableChange">
            <template slot="htmlSlot" slot-scope="text">
                <div v-html="text"></div>
            </template>
            <template slot="imgSlot" slot-scope="text">
                <span v-if="!text" style="font-size: 12px; font-style: italic">无图片</span>
                <img v-else :src="getImgView(text)" height="25px" alt="" style="max-width: 80px; font-size: 12px; font-style: italic" />
            </template>
            <template slot="fileSlot" slot-scope="text">
                <span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
                <a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="uploadFile(text)">
                    下载
                </a-button>
            </template>

            <span slot="action" slot-scope="text, record">
                <a @click="handleEdit(record)">编辑</a>

                <a-divider type="vertical" />
                <a-dropdown>
                    <a class="ant-dropdown-link">更多
                        <a-icon type="down" /></a>
                    <a-menu slot="overlay">
                        <a-menu-item>
                            <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                                <a>删除</a>
                            </a-popconfirm>
                        </a-menu-item>
                    </a-menu>
                </a-dropdown>
            </span>
        </a-table>
    </div>

    <productionTaskList-modal :odd="odd" ref="modalForm" @ok="modalFormOk"></productionTaskList-modal>
    <productionList :columns="Prop_columns" :columnList="Prop_columnList" :otherData="Prop_otherData" :showPorductList="showPorductList" :sendData="sendData" @hidden="hidden"></productionList>
</a-card>
</template>

<script>
import {
    mapState
} from "vuex"
import '@/assets/less/TableExpand.less'
import {
    mixinDevice
} from '@/utils/mixin'
import {
    getOdd,
} from '@/api/manage'
import {
    JeecgListMixin
} from '@/mixins/JeecgListMixin'
import ProductionTaskListModal from './ProductionTaskListModal'
import JDate from '@/components/jeecg/JDate.vue'
import ProductionList from './ProductionList'

export default {
    name: 'ProductionTaskListList',
    mixins: [JeecgListMixin, mixinDevice],
    components: {
        JDate,
        ProductionList,
        ProductionTaskListModal,
    },
    data() {
        return {
            odd: '',
            sendData: [],
            condition: '全部',
            options: [{
                value: '未生产',
                label: '未生产'

            }, {
                value: '生产中',
                label: '生产中'

            }, {
                value: '已生产',
                label: '已生产'

            }],
            showPorductList: false,
            description: '生产任务单管理页面',
            // 表头
            columns: [{
                    title: '序号',
                    dataIndex: '',
                    key: 'rowIndex',
                    width: 80,
                    fixed: true,
                    align: 'center',
                    customRender: function (t, r, index) {
                        return parseInt(index) + 1
                    },
                },
                {
                    title: '生产号',
                    align: 'center',
                    width: 150,
                    fixed: true,
                    dataIndex: 'odd',
                },
                {
                    title: '订单号',
                    align: 'center',
                    width: 150,
                    fixed: true,
                    dataIndex: 'orderOdd',
                },
                {
                    title: '下单日期',
                    align: 'center',
                    width: 130,
                    dataIndex: 'date',
                },
                {
                    title: '成品名称',
                    align: 'center',
                    width: 150,
                    dataIndex: 'itemName',
                },
                {
                    title: '成品编码',
                    align: 'center',
                    width: 150,
                    dataIndex: 'itemCode',
                },
                {
                    title: '客户',
                    align: 'center',
                    width: 180,
                    dataIndex: 'customerNumber',
                },
                {
                    title: '交货日期',
                    align: 'center',
                    width: 130,
                    dataIndex: 'deliveryDate',
                },
                {
                    title: '颜色',
                    align: 'center',
                    dataIndex: 'color',
                },
                {
                    title: '规格',
                    align: 'center',
                    dataIndex: 'specifications',
                },
                {
                    title: '实际生成数量',
                    align: 'center',
                    dataIndex: 'numberGenerated',
                },
                {
                    title: '任务状态',
                    align: 'center',
                    dataIndex: 'state',
                },
                {
                    title: '造粒状态',
                    align: 'center',
                    dataIndex: 'zlState',
                },
                {
                    title: '挤出状态',
                    align: 'center',
                    dataIndex: 'jcState',
                },
                {
                    title: '印刷状态',
                    align: 'center',
                    dataIndex: 'ysState',
                },
                {
                    title: '订单数量',
                    align: 'center',
                    dataIndex: 'orderNum',
                },
                {
                    title: '是否中止执行',
                    align: 'center',
                    dataIndex: 'isExecution',
                },
                {
                    title: '备注',
                    align: 'center',
                    dataIndex: 'note',
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    align: 'center',
                    fixed: 'right',
                    width: 150,
                    scopedSlots: {
                        customRender: 'action',
                    },
                },
            ],
            url: {
                list: '/production/productionTaskList/list',
                delete: '/production/productionTaskList/delete',
                deleteBatch: '/production/productionTaskList/deleteBatch',
                exportXlsUrl: '/production/productionTaskList/exportXls',
                importExcelUrl: 'production/productionTaskList/importExcel',
            },
            dictOptions: {},
            selectedMainId: ''
        }
    },
    computed: {
        ...mapState({
            Prop_columns: state => state.ProductionTaskListList.columns
        }),
        ...mapState({
            Prop_columnList: state => state.ProductionTaskListList.columnList
        }),
        ...mapState({
            Prop_otherData: state => state.ProductionTaskListList.otherData
        }),
        importExcelUrl: function () {
            return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
        }
    },
    methods: {
        getName(value) {
            this.$set(this.queryParam, 'customerNumber', value)
        },
        async handleAdd() {
            this.$refs.modalForm.add()
            this.$refs.modalForm.title = '新增'
            this.$refs.modalForm.disableSubmit = false
            let result = await getOdd({
                type: 'SC'
            })
            this.odd = result.message
        },
        production() {
            this.showPorductList = true;
            if (this.selectedRowKeys.length <= 0) {
                this.$message.warning('请选择一条记录！');
                return;
            } else {
                this.sendData = this.selectionRows;
                this.sendData.forEach(elem => {
                    elem.key = elem.odd;
                })
            }
        },
        hidden(value) {
            this.showPorductList = value;
        },
        sift(value) {
            this.queryParam.state = value;
            this.loadData();
        },
        // _success(value) {
        //     if (value.key) {
        //         this.queryParam = {
        //             state: '生产中'
        //         }
        //         this.condition = '生产中'
        //         this.loadData();
        //     }
        // },
        clickThenSelect(record) {
            return {
                on: {
                    click: () => {
                        this.onSelectChange(record.id.split(","), [record]);
                    }
                }
            }
        },
    },
}
</script>

<style scoped>
@import '~@assets/less/common.less';
</style>
